<template>
  <div class="finace">
    <div class="mainTitle flex jc-sb ai-c">
      <div class="leftDesc">数据统计</div>
      <div class="timeType flex">
        <div class="timeVal" :class="timeType==14?'timeValCurrent':''" @click="setTimeType(14)">近14天</div>
        <div class="timeVal" :class="timeType==30?'timeValCurrent':''" @click="setTimeType(30)">近30天</div>
        <div class="timeVal" :class="timeType==365?'timeValCurrent':''" @click="setTimeType(365)">近1年</div>
      </div>
    </div>
    <div class="mainContent">
      <div class="topMain flex">
        <div class="topLeft flex flex-d">
          <div class="leftDesc">金额统计</div>
          <div class="leftNumber">
            <p class="overNumTitle">当日结算金额(人民币)</p>
            <p class="overNum">¥1000.00</p>
            <div class="line"></div>
            <div class="examine flex jc-sb">
              <div class="examineLeft flex flex-d">
                <p class="examineLeftTitle">打回金额</p>
                <p class="examineLeftNum">¥1000.00</p>
              </div>
              <div class="examineLeft">
                <p class="examineLeftTitle">待结算金额(人民币)</p>
                <p class="examineLeftNum">¥1000.00</p>
              </div>
            </div>
          </div>
        </div>
        <div class="topRight flex flex-d">
          <div class="chartsCss">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="mainChartTop" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="mainContent">
      <div class="topMain flex">
        <div class="topLeft flex flex-d">
          <div class="leftDesc">结算统计</div>
          <div class="leftNumber">
            <p class="overNumTitle">当日处理笔数</p>
            <p class="overNum">10</p>
            <div class="line"></div>
            <div class="examine flex jc-sb">
              <div class="examineLeft flex flex-d">
                <p class="examineLeftTitle">打回笔数</p>
                <p class="examineLeftNum">2</p>
              </div>
              <div class="examineLeft">
                <p class="examineLeftTitle">待处理笔数</p>
                <p class="examineLeftNum">3</p>
              </div>
            </div>
          </div>
        </div>
        <div class="topRight flex flex-d">
          <div class="chartsCss">
            <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
            <div id="mainChartBottom" style="width: 100%;height:100%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    data () {
      return {
        timeType:14
      }
    },
    mounted(){
      this.setTopChart();
      this.setBottomChart();
    },
    methods: {
      //设置时间
      setTimeType(timeType){
        this.timeType=timeType;
      },
      //设置第一个图表
      setTopChart(){
        var chartDom = document.getElementById('mainChartTop');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            // text: 'Stacked Line'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left: 'center', //位置
            icon: "rect",//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
            itemWidth: 10,  // 设置宽度
            itemHeight: 4, // 设置高度
            itemGap: 20, // 设置间距
            data: ['finish', 'down'],
            textStyle: {
              //文字样式
              color: "#B4CEFF",
              fontSize: "12"
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {},
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick:{
              //隐藏刻度线
              show:false
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisLine: {
              lineStyle: {
                color: '#000',//网格线的颜色
                opacity: 0.2,
                width: 1,
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ccc',//网格线的颜色
                opacity: 0.2,
                width: 1,
                type: 'dashed'
              }
            },
          },
          series: [
            {
              name: 'finish',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210],
              smooth: true
            },
            {
              name: 'down',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310],
              smooth: true
            }
          ]
        };
        option && myChart.setOption(option);
      },
      //设置第二个图表
      setBottomChart(){
        var chartDom = document.getElementById('mainChartBottom');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
          title: {
            // text: 'Stacked Line'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            left: 'center', //位置
            icon: "rect",//形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
            itemWidth: 10,  // 设置宽度
            itemHeight: 4, // 设置高度
            itemGap: 20, // 设置间距
            data: ['finish', 'down'],
            textStyle: {
              //文字样式
              color: "#B4CEFF",
              fontSize: "12"
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {},
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick:{
              //隐藏刻度线
              show:false
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
            axisLine: {
              lineStyle: {
                color: '#000',//网格线的颜色
                opacity: 0.2,
                width: 1,
                type: 'dashed'
              }
            }
          },
          yAxis: {
            type: 'value',
            splitLine: {
              show: true,
              lineStyle: {
                color: '#ccc',//网格线的颜色
                opacity: 0.2,
                width: 1,
                type: 'dashed'
              }
            },
          },
          series: [
            {
              name: 'finish',
              type: 'line',
              stack: 'Total',
              data: [120, 132, 101, 134, 90, 230, 210],
              smooth: true
            },
            {
              name: 'down',
              type: 'line',
              stack: 'Total',
              data: [220, 182, 191, 234, 290, 330, 310],
              smooth: true
            }
          ]
        };
        option && myChart.setOption(option);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .finace{
    background-color: #F5F5F5;
    padding: 30px;
    height: calc(100vh - 60px);
    overflow-y: scroll;
    .mainTitle{
      .leftDesc{
        font-size: 18px;
        font-family: 'SourceHanSansCN-Medium, SourceHanSansCN';
        font-weight: 500;
        color: #333333;
      }
      .timeType{
        .timeVal{
          width: 60px;
          height: 32px;
          background-color: #fff;
          border-radius: 2px;
          cursor: pointer;
          font-size: 14px;
          font-family: 'SourceHanSansCN-Regular, SourceHanSansCN';
          font-weight: 400;
          color: #999999;
          text-align: center;
          line-height: 32px;
        }
        .timeValCurrent{
          background-color: #5272E2;
          color: #fff;
        }
      }
    }
    .mainContent{
      width: 100%;
      margin: 0 auto;
      padding: 20px 0;
      .topMain{
        width: 100%;
        height: 300px;
        background: #FFFFFF;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        .topLeft{
          width: 300px;
          height: 100%;
          padding: 20px 0px 20px 20px;
          .leftDesc{
            font-size: 18px;
            font-family: 'SourceHanSansCN-Medium, SourceHanSansCN';
            font-weight: 500;
            color: #333333;
            text-align: left;
            padding-bottom: 16px;
          }
          .leftNumber{
            .overNumTitle{
              font-size: 16px;
              font-family: 'SourceHanSansCN-Regular, SourceHanSansCN';
              font-weight: 400;
              color: #333333;
              text-align: left;
            }
            .overNum{
              font-size: 60px;
              font-family: 'SourceHanSansCN-Medium, SourceHanSansCN';
              font-weight: 500;
              color: #007CFC;
              text-align: left;
            }
            .line{
              width: 280px;
              height: 1px;
              background-color: #E1E1E1;
            }
            .examine{
              .examineLeft{
                padding: 20px 0;
                text-align: left;
                .examineLeftTitle{
                  font-size: 16px;
                  font-family: 'SourceHanSansCN-Regular, SourceHanSansCN';
                  font-weight: 400;
                  color: #333333;
                }
                .examineLeftNum{
                  font-size: 21px;
                  font-family: 'SourceHanSansCN-Regular, SourceHanSansCN';
                  font-weight: 400;
                  color: #007CFC;
                  margin-top: 15px;
                }
              }
            }
          }
        }
        .topRight{
          width: 100%;
          padding: 20px 0;
          .chartsCss{
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
